<template>
  <div class="container">
    <!-- 系统设置/水价设置 -->
    <el-container>
      <el-container>
        <el-aside width="250px">
          <div class="leftTreeHd">
            <span class="title">
              <i class="el-icon-s-help"></i> 用水类型
            </span>
            <span class="fr">
              <el-button type="primary" size="mini"
                @click="addWaterRateVisible = true;isAddWaterRate=true;clearFormInfo()">新增</el-button>
            </span>
            <div class="clear"></div>
          </div>
          <el-tree style="height:320px;width:230px; overflow-x:hidden; overflow-y: auto;" class="leftTree"
            :data="treeData" highlight-current :props="defaultProps" @node-click="handleTreeNodeClick">
            <div slot-scope="{ node, data }">
              <span class="leftTree-label">{{ node.label }}</span>
              <span>
                <el-button type="text" size="mini" @click="() => update(node, data)">
                  修改
                </el-button>
                <el-button type="text" size="mini" @click="() => remove(node, data)">
                  删除
                </el-button>
              </span>
            </div>
          </el-tree>
        </el-aside>
        <el-container>
          <el-main>
            <el-row :gutter="0">
              <el-col :span="10">
                <div class="sanfan-boxCard">
                  <div class="hd">
                    <span class="title">
                      <i class="el-icon-tickets"></i> 水价详情</span>
                  </div>
                  <div class="bd" style="height:208px;">
                    <div class="item">
                      <label>类型编号：</label>{{currentObj.waterRateID}}
                    </div>
                    <div class="item">
                      <label>类型名称：</label>{{currentObj.waterRateName}}
                    </div>
                    <div class="item">
                      <label>基础水价：</label>{{currentObj.price}}元
                    </div>
                    <div class="item">
                      <label>污水处理：</label>{{currentObj.effluentFeePrice?currentObj.effluentFeePrice:0}}元
                    </div>
                    <div class="item">
                      <label>水资源税：</label>{{currentObj.taxPrice?currentObj.taxPrice:0}}元
                    </div>
                    <div class="item">
                      <label>其他费用：</label>{{currentObj.otherFeePrice?currentObj.otherFeePrice:0}}元
                    </div>
                    <div class="item align_r">
                      <label>合　计：</label>
                      <span class="fc-red f20">{{currentObj.allPrice}}</span>
                      元
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="14" style="padding-left:20px;">
                <div class="sanfan-boxCard">
                  <div class="hd">
                    <span class="title">
                      <i class="el-icon-edit-outline"></i> 违约金设置</span>
                    <span class="fr">
                      <el-button type="primary" size="mini">修改</el-button>
                    </span>
                    <div class="clear"></div>
                  </div>
                  <div class="bd" style="height:208px;">
                    <!-- aaaaaa -->
                  </div>
                </div>
              </el-col>
            </el-row>
            <div class="mb20"></div>
            <div class="sanfan-boxCard">
              <div class="hd">
                <span class="title">
                  <i class="el-icon-data-line"></i> 阶梯水价</span>
                <span class="fr" v-if="1==2">
                  <el-button type="primary" size="mini" @click="openSetLadderPop">修改</el-button>
                </span>
                <div class="clear"></div>
              </div>
              <div class="bd">
                <PagesTable v-if="1==2" :tableHeader="tableHeader" :tableData="tableData"
                  :tableOperation="tableOperation" :tablePagination="tablePagination" />
              </div>
            </div>

          </el-main>
        </el-container>
      </el-container>
    </el-container>



    <!-- 新增修改  用水类型 -->
    <el-dialog :title="isAddWaterRate?'添加用水类型':'修改用水类型'" :visible.sync="addWaterRateVisible" width="500px">
      <el-form :model="waterRateForm" label-width="95px" class="sanfan-form">
        <el-form-item label="名称" class="must">
          <el-input v-model="waterRateForm.waterRateName"></el-input>
        </el-form-item>
        <el-form-item label="基础水价" class="must">
          <el-input v-model="waterRateForm.price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="水资源税" class="must">
          <el-input v-model="waterRateForm.tax">
            <template slot="append">元</template></el-input>
        </el-form-item>
        <el-form-item label="污水处理费" class="must">
          <el-input v-model="waterRateForm.effluentFee">
            <template slot="append">元</template></el-input>
        </el-form-item>
        <el-form-item label="其他费用">
          <el-input v-model="waterRateForm.otherFee">
            <template slot="append">元</template></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addWaterRateVisible = false">取 消</el-button>
        <el-button type="primary" @click="waterRatAdd">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 设置阶梯水价 -->
    <el-dialog :title="'阶梯水价设置'" :visible.sync="isSetLadderVisible" width="800px">
      <el-form :model="setLadderForm" label-width="95px" class="sanfan-form" :inline="true">
        <el-form-item label="阶梯水价" class="must">
          <el-radio-group v-model="setLadderForm.isLadder">
            <el-radio :label="2">二档</el-radio>
            <el-radio :label="3">三档</el-radio>
            <el-radio :label="4">四档</el-radio>
            <el-radio :label="5">五档</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-if="setLadderForm.isLadder>1">
          <el-form-item label="二档水量" class="must">
            <el-input v-model="setLadderForm.lv2">
              <template slot="append">吨</template>
            </el-input>
          </el-form-item>
          <el-form-item label="二档水价" class="must">
            <el-input v-model="setLadderForm.lv2p">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </div>
        <div v-if="setLadderForm.isLadder>2">
          <el-form-item label="三档水量" class="must">
            <el-input v-model="setLadderForm.lv3">
              <template slot="append">吨</template>
            </el-input>
          </el-form-item>
          <el-form-item label="三档水价" class="must">
            <el-input v-model="setLadderForm.lv3p">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </div>
        <div v-if="setLadderForm.isLadder>3">
          <el-form-item label="四档水量" class="must">
            <el-input v-model="setLadderForm.lv4">
              <template slot="append">吨</template>
            </el-input>
          </el-form-item>
          <el-form-item label="四档水价" class="must">
            <el-input v-model="setLadderForm.lv4p">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </div>
        <div v-if="setLadderForm.isLadder>4">
          <el-form-item label="五档水量" class="must">
            <el-input v-model="setLadderForm.lv5">
              <template slot="append">吨</template>
            </el-input>
          </el-form-item>
          <el-form-item label="五档水价" class="must">
            <el-input v-model="setLadderForm.lv5p">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isSetLadderVisible = false">取 消</el-button>
        <el-button type="primary" @click="waterRateLadderMod">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 
      
     -->
  </div>
</template>

<script>
  import PagesTable from "../../components/PagesTable.vue";
  export default {
    components: {
      PagesTable
    },
    data() {
      return {
        isAddWaterRate: true,
        addWaterRateVisible: false,
        waterRateForm: {
          waterRateID: "",
          waterRateName: "",
          price: "",
          tax: "",
          effluentFee: "",
          otherFee: 0
        },
        isSetLadderVisible: false,
        setLadderForm: {
          isLadder: 2,
          lv2: "",
          lv2p: "",
          lv3: "",
          lv3p: "",
          lv4: "",
          lv4p: "",
          lv5: "",
          lv5p: "",
        },
        tableHeader: [{
            name: "阶段",
            mark: "waterLadderName",
            minWidth: "90"
          }, {
            name: "用水量(吨)",
            mark: "currLadder",
            minWidth: "90"
          },
          {
            name: "基础水价(元)",
            mark: "currPrice",
            minWidth: "90"
          }
        ],
        tableOperation: [],
        tablePagination: {
          show: false,
          current: 1,
          size: 10,
          total: 1
        },
        tableData: [{
            c: 0,
            currLadder: "9",
            currPrice: 2.4,
            f: "3*n",
            waterLadderName: "第一阶梯",
            waterLadderID: 1,
            pn: 3
          },
          {
            c: 1,
            currLadder: "13",
            currPrice: 3,
            f: "4*n+1",
            waterLadderName: "第二阶梯",
            waterLadderID: 2,
            pn: 4
          },
          {
            c: 0,
            currLadder: "-",
            currPrice: 6,
            f: "",
            waterLadderName: "第三阶梯",
            waterLadderID: 3,
            pn: 0
          }
        ],
        tableDataAll: [],
        treeData: [{
            "effluentFeeID": 1,
            "reportGroup": "JM",
            "name": "\u738b\u6811\u6797",
            "effluentFeePrice": 0.85,
            "price": 2.4,
            "waterRateID": 1,
            "isLadder": 1,
            "taxID": 0,
            "waterRateName": "\u751f\u6d3b\u7528\u6c34",
            "lastModifySuid": 1,
            "otherFeeID": 0,
            "otherFeePrice": null,
            "modifyTime": "2021-09-30 15:28:25",
            "createTime": "2021-01-01 00:00:00",
            "taxPrice": null,
            "allPrice": 3.25
          },
          {
            "effluentFeeID": 1,
            "reportGroup": "JM",
            "name": "\u738b\u6811\u6797",
            "effluentFeePrice": 0.85,
            "price": 2.0,
            "waterRateID": 2,
            "isLadder": 0,
            "taxID": 0,
            "waterRateName": "\u5c45\u6c11\u7528\u6c34",
            "lastModifySuid": 1,
            "otherFeeID": 0,
            "otherFeePrice": null,
            "modifyTime": "2021-08-31 17:54:17",
            "createTime": "2021-01-01 00:00:00",
            "taxPrice": null,
            "allPrice": 2.85
          },
          {
            "effluentFeeID": 4,
            "reportGroup": "TZ",
            "name": "\u738b\u6811\u6797",
            "effluentFeePrice": 1.2,
            "price": 6.0,
            "waterRateID": 3,
            "isLadder": 0,
            "taxID": 0,
            "waterRateName": "\u7ecf\u8425\u670d\u52a1",
            "lastModifySuid": 1,
            "otherFeeID": 0,
            "otherFeePrice": null,
            "modifyTime": "2021-08-31 17:54:56",
            "createTime": "2021-01-01 00:00:00",
            "taxPrice": null,
            "allPrice": 7.2
          },
          {
            "effluentFeeID": 4,
            "reportGroup": "TZ",
            "name": "\u738b\u6811\u6797",
            "effluentFeePrice": 1.2,
            "price": 12.0,
            "waterRateID": 5,
            "isLadder": 0,
            "taxID": 3,
            "waterRateName": "\u7279\u79cd\u7528\u6c34",
            "lastModifySuid": 1,
            "otherFeeID": 0,
            "otherFeePrice": null,
            "modifyTime": "2021-09-03 09:26:41",
            "createTime": "2021-01-01 00:00:00",
            "taxPrice": 3.0,
            "allPrice": 16.2
          },
          {
            "effluentFeeID": 4,
            "reportGroup": "FJM",
            "name": "\u738b\u6811\u6797",
            "effluentFeePrice": 1.2,
            "price": 4.0,
            "waterRateID": 6,
            "isLadder": 0,
            "taxID": 2,
            "waterRateName": "\u975e\u5c45\u6c11\u7528\u6c34",
            "lastModifySuid": 1,
            "otherFeeID": 0,
            "otherFeePrice": null,
            "modifyTime": "2021-09-01 14:45:22",
            "createTime": "2021-01-01 00:00:00",
            "taxPrice": 0.7,
            "allPrice": 5.9
          },
          {
            "effluentFeeID": 0,
            "reportGroup": "JM",
            "name": "\u738b\u6811\u6797",
            "effluentFeePrice": null,
            "price": 2.4,
            "waterRateID": 7,
            "isLadder": 1,
            "taxID": 0,
            "waterRateName": "\u5c45\u6c11\u751f\u6d3b\u7528\u6c34",
            "lastModifySuid": 1,
            "otherFeeID": 0,
            "otherFeePrice": null,
            "modifyTime": "2021-09-03 09:46:49",
            "createTime": "2021-01-01 00:00:00",
            "taxPrice": null,
            "allPrice": 2.4
          },
          {
            "effluentFeeID": 0,
            "reportGroup": "FJM",
            "name": "\u738b\u6811\u6797",
            "effluentFeePrice": null,
            "price": 4.0,
            "waterRateID": 8,
            "isLadder": 0,
            "taxID": 2,
            "waterRateName": "\u975e\u751f\u6d3b\u7528\u6c34",
            "lastModifySuid": 1,
            "otherFeeID": 0,
            "otherFeePrice": null,
            "modifyTime": "2021-09-07 16:31:08",
            "createTime": "2021-01-01 00:00:00",
            "taxPrice": 0.7,
            "allPrice": 4.7
          }
        ],
        defaultProps: {
          label: 'waterRateName',
          children: 'children'
        },
        currentObj: {}
      }
    },
    mounted() {
      // this.getData();
    },
    beforeDestroy() {},
    created() {},
    methods: {
      handleTreeNodeClick(data) {
        const self = this;

        var currentObj = data
        // currentObj.allPrice = data.price + data.tax + data.effluentFee + data.otherFee;
        self.currentObj = currentObj;

        if (self.currentObj.isLadder > 1) {
          var tableData = [{
            jd: "第1档",
            use: 9,
            price: this.currentObj.price
          }]
          for (let index = 2; index <= self.currentObj.isLadder; index++) {
            const name1 = "lv" + index;
            const name2 = "lv" + index + "p";
            var item = {
              jd: "第" + index + "档",
              use: self.currentObj[name1],
              price: self.currentObj[name2]
            }
            tableData.push(item);
          }
          self.tableData = tableData;
        } else {
          self.tableData = [{
            jd: "第1档",
            use: 9,
            price: this.currentObj.price
          }, {
            jd: "第2档",
            use: this.currentObj.lv2,
            price: this.currentObj.lv2p
          }, {
            jd: "第3档",
            use: this.currentObj.lv3,
            price: this.currentObj.lv3p
          }];
        }



      },
      getData() {
        const self = this;
        self.waterRatGet()
      },
      update(node, data) {
        this.addWaterRateVisible = true;
        this.isAddWaterRate = false;
        this.waterRateForm = data;

      },
      remove(node, data) {
        // this.$message("暂不支持删除！");
        // const parent = node.parent;
        // const children = parent.data.children || parent.data;
        // const index = children.findIndex(d => d.id === data.id);
        // children.splice(index, 1);

        // console.log("node", node)
        // console.log("data", data)
        this.$confirm('确定要删除此用水类型吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.waterRateDel(data.id)
        }).catch(() => {});

      },
      clearFormInfo() { //新增时清空表单
        this.waterRateForm = {
          waterRateID: "",
          waterRateName: "",
          price: "",
          tax: "",
          effluentFee: "",
          otherFee: 0
        }
      },
      waterRatAdd() { //增/改
        const self = this;
        if (!self.waterRateForm.waterRateName ||
          !self.waterRateForm.price ||
          !self.waterRateForm.tax ||
          !self.waterRateForm.effluentFee
          // ||!self.waterRateForm.otherFee
        ) {
          self.$message.error("标星号为必填！");
          return false
        }

        var param = {
          waterRateName: self.waterRateForm.waterRateName,
          price: self.waterRateForm.price,
          tax: self.waterRateForm.tax,
          effluentFee: self.waterRateForm.effluentFee,
          otherFee: self.waterRateForm.otherFee
        }
        if (self.isAddWaterRate) {
          //新增
          self.$axios.post("/service/bsWaterRateAdd", param).then(res => {
            if (res.data.status === "success") {
              self.$message.success(res.data.res);
              self.getData();
              self.addWaterRateVisible = false
            } else {
              self.$message.error(res.data.res);
            }
          });
        } else {
          param.waterRateID = self.waterRateForm.waterRateID
          //修改
          self.$axios.post("/service/bsWaterRateMod", param).then(res => {
            if (res.data.status === "success") {
              self.$message(res.data.res);
              self.getData();
              self.addWaterRateVisible = false
              self.clearCurrentData();
            } else {
              self.$message.error(res.data.res);
            }
          });
        }
      },
      waterRatGet() { //水价列表
        const self = this;

        self.$axios.post("/service/bsWaterRateGet").then(res => {
          if (res.data.status === "success") {
            var tempData = res.data.res
            if (tempData.length > 0) {
              tempData.forEach(element => {
                element.id = element.waterRateID
                element.children = []
              });
            }
            self.treeData = tempData.filter((value, index) => value.waterRateID != 0)
          } else {
            self.$message(res.data.res);
          }
        });
      },

      waterRateDel(id) { //删除
        const self = this;
        var param = {
          waterRateID: id
        }
        self.$axios.post("/service/bsWaterRateDel", param).then(res => {
          self.$message(res.data.res);
          self.getData();
        });
      },
      waterRateLadderMod() { //修改阶梯水价
        //
        const self = this;

        for (let index = 2; index <= self.setLadderForm.isLadder; index++) {
          const name1 = "lv" + index;
          const name2 = "lv" + index + "p";
          if (self.setLadderForm[name1] == "" || self.setLadderForm[name2] == "") {
            self.$message.error("标星号为必填！");
            return false
          }
        }

        var param = {
          waterRateID: self.currentObj.waterRateID,
          isLadder: self.setLadderForm
            .isLadder //这个参数只可以为2-5，默认为1就是一阶，相当于没有阶梯，2-5分别代表2-5阶，如果输入2，那么参数里必须加上lv2和lv2p  ，如果输入3 ，那么得加上lv2,lv2p,lv3,lv3p，以此类推
        }
        for (let index = 2; index <= self.setLadderForm.isLadder; index++) {
          const name1 = "lv" + index;
          const name2 = "lv" + index + "p";
          param[name1] = self.setLadderForm[name1];
          param[name2] = self.setLadderForm[name2];
        }
        self.$axios.post("/service/bsWaterRateLadderMod", param).then(res => {
          if (res.data.status === "success") {
            self.$message(res.data.res);
            self.getData();
            self.isSetLadderVisible = false
            self.clearCurrentData();
          } else {
            self.$message.error(res.data.res);
          }
        });
      },
      openSetLadderPop() { //打开弹框
        var self = this;
        if (self.currentObj.waterRateID) {

          if (self.currentObj.isLadder > 1) {
            self.setLadderForm.isLadder = self.currentObj.isLadder
            for (let index = 2; index <= self.setLadderForm.isLadder; index++) {
              const name1 = "lv" + index;
              const name2 = "lv" + index + "p";
              self.setLadderForm[name1] = self.currentObj[name1]
              self.setLadderForm[name2] = self.currentObj[name2]
            }
          } else {
            self.setLadderForm.isLadder = 2
            self.setLadderForm.lv2 = ""
            self.setLadderForm.lv2p = ""
          }
          self.isSetLadderVisible = true;
        } else {
          self.$message("请先在左侧选择用水类型后再修改！");
          return false;
        }
      },
      clearCurrentData() { //清除当前选中
        this.currentObj = {};
        this.tableData = [];
      }

    }
  }
</script>
<style lang="scss">
  .leftTree-label {
    display: inline-block;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: text-bottom;
  }

  .leftTree .el-tree-node__content {
    height: 32px;
  }
</style>